<template>
  <div style="margin-left: 50px">
    <div class="main_hot-mainHot-1Jirj">
      <div class="main_hot-classifyTab-1A1LM">
        <div class="main_hot-navItem-2jdYB main_hot-navItemActive-13nfx"><span>全部</span>
          <div class="main_hot-iconUnActive-5jKjq main_hot-iconActive-2YHzr"></div>
        </div>
      </div>
      <el-row>
        <el-col :span="24" v-for="(o, index) in AnchorDynamicUA" :key="index">
          <el-card :body-style="{ padding: '0px' }" style=" border-radius: 20px;">
            <img
              :src="o.aPic"
              class="image">
            <b>
              <div class="name">{{o.aName}}</div>
            </b>
            <div class="create">发布于{{o.createTime}}</div>
            <div>
              <span v-html="o.dyDcontent"></span>
            </div>
            <div>
              <img
                :src="o.dImg"
                class="img">
            </div>
            <div style="padding: 0px;">
              <div class="tableTitle"><span class="midText"></span></div>
              <el-button :plain="true" class="el-icon-star-off" @click="collect(o.dyId)">收藏</el-button>
              <el-button :plain="true" class="el-icon-chat-line-round" @click="talk(o.dyId)"></el-button>
              <el-button :plain="true" class="icon-zanpress" @click="point(o.dyId)">点赞</el-button>
              <div class="bottom clearfix">
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials=true
export default {
  name: "",
  data() {
    return {
      AnchorDynamicUA: [{
        dyDcontent: '',
        aName: '',
        aPic: '',
        dContent: '',
        createTime: '',
        dImg: '',
        dyId:''
      }]
    }
  },
  methods:{
    findDynamic: function () {
      axios.post("http://localhost:7000/live-user/user/findDynami").then(res => {
        if (res.data.code == 200) {
          console.log(res.data.data)
          this.AnchorDynamicUA = res.data.data;
        }
      })
    },
    talk: function (uId,dyId) {
      console.log(dyId)
      this.$router.push({
        name:'talk',
        params:{
          uId:uId,
          dyId:dyId
        }
      })
    },
    collect: function (dyId) {
      axios.post("http://localhost:7000/live-user/user/insertCollect1",{dyId:dyId}).then(res=>{
        console.log(dyId)
        if (res.data.code == 200){
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('span', null, '收藏 '),
              h('i', {style: 'color: teal'}, '成功')
            ])
          });
        }
      })

    },
    point: function (dyId) {
      console.log(dyId)
      axios.post("http://localhost:7000/live-user/user/insertPoint",{dyId:dyId}).then(res=>{
        console.log(dyId)
        alert(1111)
        if (res.data.code == 200){
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('span', null, '点赞 '),
              h('i', {style: 'color: teal'}, '成功')
            ])
          });
        }
      })

    }
  },
  mounted() {
    this.findDynamic();
  }
}
</script>

<style scoped>
.main_hot-mainHot-1Jirj {
  width: 800px;
  display: inline-block;
  margin-right: 10px;
}

* {
  word-break: break-all;
}

.main_hot-classifyTab-1A1LM {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  background-color: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 10px;
}

.main_hot-navItem-2jdYB {
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.main_hot-iconUnActive-5jKjq.main_hot-iconActive-2YHzr {
  display: block;
  border-radius: 4px 4px 0 0;
  width: 30px;
  height: 4px;
  background: #fa8c16;
  margin: -4.8px auto 0;
}

.tableTitle {
  position: relative;
  margin: 0 auto;
  height: 10px;
  background-color: black;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);
}
.img{
  width: 270px;
  height: 180px;

}
</style>
